<script>
import { getUserListFn } from '@/api/user';

export default {
    data() {
        return {
            userList: [],
            // 当前页数
            current: 1,
        }
    },
    async mounted() {
        // getUserListFn().then(res => { 
        //     console.log(res);
        // })
        const res = await getUserListFn();
        this.userList = res.data;
    },
    computed: { 
        tableData() { 
            return this.userList.slice((this.current-1)*10, this.current*10);
        }
    }
}
</script>

<!-- 待优化，应该每次只请求十条，翻页再次请求 -->
<template>
    <div>
        <h1>用户列表</h1>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="180">
                <!-- 作用域插槽 -->
            <template #default="scope">
                <el-tag>
                    {{ (current-1)*10+scope.$index+1 }}
                </el-tag>
            </template>
            </el-table-column>
            <el-table-column prop="tel" label="手机号" width="180">
            </el-table-column>
            <el-table-column prop="nickname" label="账号" width="180">
            </el-table-column>
            <el-table-column prop="telcode" label="验证码" width="180">
            </el-table-column>
        </el-table>
        <el-pagination  v-model:current-page="current" background layout="prev, pager, next,jumper,->, total" :total="this.userList.length" />
    </div>
</template>